<template>
  <div class="wechat-container">
    <div class="header">
      <div class="back"></div>
    </div>
    <div class="message">
      <div class="order">{{order.id}}</div>
      <div class="show-money">¥{{order.money}}</div>
    </div>
    <div class="button">
      <Button class="pay-button" :loading="payLoading" type="success" long @click="pay">{{payStatus}}</Button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "WeChat",
    data() {
      return {
        title: "",
        payStatus: "立即支付",
        payLoading: false,
        order: {
          id: null,
          money: null
        }
      }
    },
    props: {
      orderId: String,
    },
    methods: {
      getOrder() {
        this.$requests.get("/order/getOrder", {orderId: this.orderId}).then(res => {
          if (res.data.code === 0) {
            this.order = res.data.data;
          }
        })
      },
      pay() {
        this.payLoading = true;
        this.payStatus = "正在支付……";
        this.$requests.post("/order/pay", {
          id: this.orderId,
          pay: 2
        }).then(res => {
          setTimeout(() => {
            if (res.data.code === 0) {
              this.$Message.success("支付成功");
              setTimeout(() => {
                this.$router.push("/payok");
              }, 1000);
            } else {
              this.$Message.error(res.data.msg);
            }
            setTimeout(() => {
              this.payLoading = false;
              this.payStatus = "立即支付";
            }, 500);
          }, 1000)
        })
      }
    },
    created() {
      this.getOrder();
    }
  }
</script>

<style lang="less" scoped>
  .wechat-container {
    height: 100%;
    color: black;
    background: #efeff4;

    .header {
      height: 45px;
      background: #393a3e;

      .back {
        float: left;
        width: 20%;
        margin-left: 10px;
        height: 45px;
        background: url("../../assets/wechat/back.jpg") no-repeat left;
        background-size: 15px 15px;
      }
    }

    .message {
      padding: 18px 0;

      .order {
        font-size: 20px;
        text-align: center;
      }

      .show-money {
        text-align: center;
        font-size: 50px;
        line-height: 50px;
      }
    }

    .button {
      margin-top: 15px;
      height: 15%;
      padding: 0 16px;

      .pay-button {
        font-size: 16px;
        height: 45px;
        line-height: 45px;
        background: #44bf16;
        color: white;
        text-align: center;
        border-radius: 3px;
      }
    }
  }
</style>
